import {NotHaveDevCard} from "@/components/devCard"
import AbnormalMsg from "@/components/devCard/abnormalMsg"
import MyNav from "@/components/nav"
import appStore from "@/store/app"
import {iconUrl, imagesUrl} from "@/utils/baseUrl"
import {getStorage} from "@/utils/localstoreage"
import {View, Image} from "@tarojs/components"
import Taro, {useDidShow} from "@tarojs/taro"
import {observer} from "mobx-react"
import {useContext, useEffect} from "react"
import {
	DevAbnormalCard,
	DevStatusCard,
	SettingDevCardByAnalyze,
	SettingDevCardByConfig
} from "./components"
import settingStore from "./model"

const Setting: React.FC = (): JSX.Element => {
	const {detilPack, devList, getDevListShowType, changeDevListShowType, updateDevList} =
		useContext(settingStore)

	const {userInfo, isLogin} = useContext(appStore)

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Setting useEffect [userInfo.userCompany]")
		if (userInfo.userCompany) Taro.setNavigationBarTitle({title: userInfo.userCompany})
	}, [userInfo])

	useDidShow(() => {
		updateDevList()
	})

	return (
		<View className="w-screen h-screen overflow-hidden flex flex-col bg-xxx_bg relative">
			{/* 背景图片 没有层级 */}
			<Image
				className="absolute top-0 left-0 w-full h-full"
				src={imagesUrl + "setting-bg.png"}
			></Image>

			{/* 自定义头部栏 最高层级 */}
			<MyNav showBack={false}>{getStorage("userCompany") || "恒蓝云"}</MyNav>

			{/* 主视图区 */}
			{isLogin ? (
				<View className="flex-1 overflow-hidden flex flex-col pt-24 z-10">
					{/* 仪表盘卡片 */}
					{devList && devList.length ? (
						<DevStatusCard
							detailPack={detilPack}
							devListShowType={getDevListShowType}
							changeDevListShowType={changeDevListShowType}
						></DevStatusCard>
					) : null}

					{/* 异常卡片 */}
					{/* 报警栏 */}
					{/* {devList && devList.length ? (
            <View className="px-16">

              <AbnormalMsg
                abnormalNum={detilPack.devExceptionCount || 0}
                abnormalLabelDesc={'（所有设备）'}
                showWarning={false}
                style={{
                  padding: '22rpx 12rpx'
                }}
                textStyle={{
                  fontWeight: '700'
                }}
              ></AbnormalMsg>
            </View>
          ) : null} */}

					{/* 设备卡片 */}
					{devList ? (
						devList.length ? (
							<View className="flex-1 mt-24 flex flex-col overflow-hidden">
								<View className="flex px-16 mb-12 justify-between items-center">
									{getDevListShowType === "config" ? (
										<View className="text-14 text-xx_text">设备配置</View>
									) : null}
									{getDevListShowType === "analyze" ? (
										<View className="text-14 text-xx_text">设备分析</View>
									) : null}
									<View className="h-24 flex">
										{/* <Image
											src={iconUrl("device-listType-singleDev-dark.png")}
											className="w-24 h-24 mr-10 transition-all"
											style={{
												opacity: getDevListShowType === "config" ? 0.5 : 0.2
											}}
											onClick={() =>
												getDevListShowType === "config" &&
												changeDevListShowType("analyze")
											}
										></Image> */}
										{/* <Image
											src={iconUrl("device-listType-simpleList-dark.png")}
											className="w-24 h-24  transition-all"
											style={{
												opacity:
													getDevListShowType === "analyze" ? 0.5 : 0.2
											}}
											onClick={() =>
												getDevListShowType === "analyze" &&
												changeDevListShowType("config")
											}
										></Image> */}
									</View>
								</View>
								<View className="flex-1 px-16 overflow-y-auto">
									{getDevListShowType === "analyze"
										? devList.map(item => (
												<SettingDevCardByAnalyze
													devSetPack={item}
												></SettingDevCardByAnalyze>
										  ))
										: null}

									{getDevListShowType === "config"
										? devList.map(item => (
												<SettingDevCardByConfig
													devSetPack={item}
												></SettingDevCardByConfig>
										  ))
										: null}
								</View>
							</View>
						) : (
							<NotHaveDevCard></NotHaveDevCard>
						)
					) : null}
				</View>
			) : null}
		</View>
	)
}
export default observer(Setting)
